<template>
  <div class="container">
    <header>
      <div class="search search2 fl">
        <input type="image" src="images/ss.jpg" />
        <input type="text" name="search" placeholder="搜索附近的房源" />
      </div>
      <img class="fr" src="images/top.jpg" />
      <div class="clear"></div>
    </header>
    <section class="banner">
      <div v-swiper:mySwiper="swiperOption">
        <ul class="swiper-wrapper">
          <li class="swiper-slide" v-for="banner in banners" :key="banner.hid">
            <a href="#">
              <img :src="banner.imgUrl" />
            </a>
          </li>
        </ul>
        <!-- <ul class="swiper-wrapper">
          <li class="swiper-slide">
            <a href="#">
              <img src="images/banner2.jpg" />
            </a>
          </li>
          <li class="swiper-slide">
            <a href="#">
              <img src="images/banner2.jpg" />
            </a>
          </li>
          <li class="swiper-slide">
            <a href="#">
              <img src="images/banner2.jpg" />
            </a>
          </li>
        </ul>-->
        <!-- 分页器 -->
        <div class="swiper-pagination" slot="pagination"></div>
      </div>
    </section>
    <section class="content">
      <h1>新房源</h1>
      <ul class="c">
        <li>
          区域
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          租金
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          户型
          <span class="icon">&#xe6aa;</span>
        </li>
        <li>
          筛选
          <span class="icon">&#xe6aa;</span>
        </li>
      </ul>
      <ul class="case">
        <li v-for="item in newHouse" :key="item.hid">
          <a href="homedetails.html">
            <img :src="item.cover" class="fl" />
            <div class="text fr">
              <h1>{{item.name}}</h1>
              <p>{{item.address}}</p>
              <ul>
                <li class="active">在线签约</li>
                <li>近地铁</li>
                <li>精装修</li>
              </ul>
              <p>
                {{item.rentMoney}}
                <span>元/月</span>
              </p>
            </div>
          </a>
        </li>
        <div class="loadmore" @click="loadMore">...加载更多</div>
      </ul>
    </section>
  </div>
</template>

<script>
//获取封装好的请求数据函数
import { getHomeBanner, getNewHouse } from "../network/home.js";
export default {
  // 组件名称
  name: "home",
  // 加载子组件（页面分离的内容）
  components: {},
  data() {
    return {
      // 定义变量
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        loop: true,
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
      },
      page: 1, //页码
      banners: [],
      newHouse: [],
      newHouseAll: [],
    };
  },
  // 生命周期
  mounted() {
    //请求获取顶部轮播信息
    getHomeBanner("/data/ad_data.json")
      .then((data) => {
        if (data.data.code == 200) {
          this.banners = data.data.data;
        } else {
          return "error";
        }
      })
      .catch(() => console.log("error"));
    getNewHouse("/data/house_data.json")
      .then((res) => {
        let data = res.data;
        if (data.code == 200) {
          this.newHouseAll = data.newHouse;
          this.newHouse = this.newHouseAll.slice(0, 3);
        } else {
          return "error";
        }
      })
      .catch(() => console.log("err"));
  },
  created() {},
  updated() {},
  destroyed() {},
  methods: {
    // 事件的函数（写方法格式）
    loadMore() {
      if (this.newHouse.length < this.newHouseAll.length) {
        this.page++;
        this.newHouse = this.newHouseAll.slice(0, 3 * this.page);
      }
    },
  },
  computed: {
    // 计算属性（定义变量，跟data不一样，可以对变量的值进行更多的赋值操作）
  },
  watch: {
    // 监听变量的改变（会自动更新变量的值）
  },
};
</script>
<style src="../assets/css/home.css" scoped></style>
<style scoped >
.loadmore {
  text-align: center;
  font-size: 0.3rem;
  cursor: pointer;
}
</style>
